<template>
  <div class="login">
    <el-card class="box-card">
      <h1>AAAAAA管理系统</h1>
      <el-tabs v-model="role">
        <el-tab-pane label="监督检查" name="inspec"></el-tab-pane>
        <el-tab-pane label="农村家宴" name="familyPartyRecord"></el-tab-pane>
      </el-tabs>


      <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
      </el-form>

      <el-button @click="login">登录</el-button>

    </el-card>
  </div>
</template>

<script>
import API from "@/api";
import {pick} from 'lodash'

export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
      role: "inspec",
      num: 1
    };
  },

  methods: {
    async login() {

      await this.$refs.ruleForm.validate()

      const data = await API.login({
        ...this.ruleForm,
        role: this.role,
        captchaId: "",
        verifyCode: "",
      });

      this.$store.commit("setUserInfo", {token: data.token})

      const userInfo = await API.getUserInfo()

      this.$store.commit('setRoles', {roles: userInfo.roles})

      this.addRoute();

      await this.$router.push('/layout');
    },

    addRoute(menus = this.$store.getters.currentMenus) {
      menus.forEach((item) => {
        if (item.component) {
          const data = pick(item, ["path", "component"])
          this.$router.addRoute("layout", data)
        }
        if (item.children) {
          this.addRoute(item.children)
        }
      })
    }

  }
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background: #2f3447;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-card {
  width: 500px;
  height: 400px;
}
</style>
